<template>
   <view class="container bg-white" style="height:calc(100vh)" >
        <view class="cu-form-group  text-center tab-container order-tab" style="height:calc(30vh)" >
            <view class="cu-item flex-sub">
             <button class="avatar-wrapper  sm avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"  >
                <image class="avatar  sm avatar-img" :src="user.head?cdnHost+user.head:'/static/image/my-default.png'"></image>
            </button> 
            </view>
        </view>
        <view class="cu-form-group">
				<view class="title">昵称</view>
				<input type="nickname"  class="weui-input" v-model="user.nick" @blur="onNickBlur" />
		</view>
		<view class="cu-form-group">
				<view class="title">性别</view>
                <!-- <switch class='switch-sex' @change="onSwitchSex"  color="#000" :checked="user.sex==1?true:false"></switch> -->
                <fui-switch @change="sexChange" :checked="user.sex==1?true:false"></fui-switch>
				<!-- <switch class='switch-sex' @change="onSwitchSex"  color="#FFB703" :class="user.sex==1?'checked':''" :checked="user.sex==1?true:false"></switch> -->
			</view>
		<!-- <view class="cu-form-group">
				<view class="title">手机</view>
				<input type="number"  class="weui-input" maxlength="11"  v-model="user.phone" />
		</view> -->
		<view class="uni-flex uni-row margin-top">
            <button class="login-btn" type='primary' @click="doLogin"  lang="zh_CN">登 录</button>
        </view>
		
    </view>
</template>
<script lang="ts" src="./login.ts"/>
<style>
.login-btn{
    margin: auto 30rpx;
}
.avatar-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  padding: 0;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
::v-deep  wx-button::after  {
    border: 1px solid rgb(245 243 243 / 20%) !important;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-wrapper{
    width: 180rpx;
    height: 180rpx;
	padding:0;
}
.avatar{
	height:100%;
}
.cu-form-group+.cu-form-group {
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
}

.cu-btn {
    padding: 0 ;
    font-size: 20rpx;
    height: 52rpx;
    width: 97rpx;
}

::v-deep  .fui-switch__input-def::before {
    background: var(--fui-color-primary, #ff4646)!important;
    border-color: var(--fui-color-primary, #ff4646)!important;
}
</style>